<template>
  <div>
    <bread class="filter">
      <h1>
        校管项目管理
        <span class="el-icon-arrow-right icon"></span>
        <span class="sub-title">2018年校级教研重点项目</span>
        <span class="el-icon-arrow-right icon"></span>
        <span class="sub-title">申报项目详情</span>
      </h1>
      <div class="pull-right">
        <el-button size="small" class="cancel">退回修改</el-button>
        <el-button size="small" type="primary">通过初审</el-button>
      </div>
    </bread>
    <pageContent isCard>
      <h1 class="title">全球化时代生态正义的意识形态陷阱与破解进路研究</h1>
      <div class="status">
        审核状态 <span class="">初审通过</span>
      </div>
      <div class="info">
        <dl>
          <dt>
            <p>申请人</p>
            <div>王伟伟</div>
          </dt>
          <dt>
            <p>所属学院</p>
            <div>化工学院</div>
          </dt>
          <dt>
            <p>资助类型</p>
            <div>面上</div>
          </dt>
          <dt>
            <p>项目类型</p>
            <div>自然类</div>
          </dt>
          <dt>
            <p>预计成果</p>
            <div>5</div>
          </dt>
          <dt>
            <p>预计结项</p>
            <div>2019-05-04 </div>
          </dt>
        </dl>
      </div>
      <div class="files">
        <ul>
          <li>
            <p>申请书</p>
            <div>2018年度学校教研课题申请书.PDF</div>
          </li>
          <li>
            <p>评审活页</p>
            <div>2018年度学校教研课题申请书.PDF</div>
          </li>
        </ul>
      </div>
      <div class="opinion" v-if="status == 1">
        <h3>审批意见</h3>
        <div class="opinion-container">
          初审通过，待专家评审
        </div>
      </div>
      <div class="score">
        <h3>专家评分</h3>
        <template>
          <el-table
            :data="head_val"
            border
            size="small"
            :span-method="arraySpanMethod"
            cell-class-name="custom-table-header-dark-gray"
            header-row-class-name="custom-table-header-dark-gray"
            style="width: 100%">
            <el-table-column
                label="评分项"
                style="background: #E0E6ED;"
                prop="a"
                width="150">
                <template slot-scope="scope">
                <div style="text-align: center; ">
                  {{scope.row.a}}
                </div>
              </template>
            </el-table-column>

              <el-table-column
                label="分值"
                prop="c"
                width="150">
              </el-table-column>
            <el-table-column
              prop="d"
              label="去值后平均"
              width="120">
            </el-table-column>
            <el-table-column
              v-for="(item, i) in fixed_head"
              :key="i"
              :label="item.cn"
              :prop="item.en"
              width="150">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </pageContent>
  </div>
</template>

<script>
import pagination from 'components/pagination';
import NormalFilter from 'components/NormalFilter';
import PopFilter from 'components/PopFilter';

export default {
  name: 'hello',
  data () {
    return {
      status: 2,
      fixed_head: [
        {
          cn: '去极值后平均',
          en: 'e',
        },
        {
          cn: '平均分',
          en: 'f',
        },
        {
          cn: '李老',
          en: 'g',
        },
        {
          cn: '王老',
          en: 'h',
        },
        {
          cn: '王老',
          en: 'h',
        },{
          cn: '王老',
          en: 'h',
        },{
          cn: '王老',
          en: 'h',
        },{
          cn: '王老',
          en: 'h',
        },{
          cn: '王老',
          en: 'h',
        },
      ],
      head_val: [
        {
          a: '先进性',
          b: '技术上的先进性',
          c: '5',
          d: '4'
        },
        {
          a: '独创性',
          b: '技术思路的独创性',
          c: '5',
          d: '4',
          h: '999999'
        },
        {
          a: '经济性',
          b: '项目创造的经济价值',
          c: '5',
          d: '4'
        },
        {
          a: '经济性',
          b: '项目创造的经济价值',
          c: '5',
          d: '4'
        },
        {
          a: '可行性',
          b: '项目执行的难易度',
          c: '5',
          d: '4'
        },
        {
          a: '总分',
          d: '4',
          c: '5',
        },
        {
          a: '表决意见',
          d: '4',
          c: '5',
          h: '优秀'
        },
        {
          a: '专家评语',
          d: '4',
          c: '5',
          h: 'btn'
        }
      ],
      tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }],
    }
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(row);
      console.log(column.property);
      console.log(rowIndex);
      console.log(columnIndex);
      console.log('-----------------');

      if (rowIndex > 4 && rowIndex < 8) {
          if (columnIndex === 0) {
            return [1 , 3];
          } else if (columnIndex === 1) {
            return [0, 0];
          } else if (columnIndex === 2) {
            return [0, 0];
          }
        }

    },
    cellStyleName({row, column, rowIndex, columnIndex}) {
      return '.custom-table-header-dark-gray'
    }
  },
  components: {
    pagination,
    NormalFilter,
    PopFilter
  }
};
</script>
<style scoped lang="scss">
  @import './index.scss';
  .primary-color {
    color: var(--success-color);
  }
  .cur_select {
    margin-left: 20px;
  }
  .cancel {
    background: none;
    color: white;
    width: 80px;
  }
  .title {
    font-size:24px;
    color:rgba(48,49,51,1);
  }
  .status {
    margin-top: 12px;
    font-size:16px;
    color:rgba(48,49,51,1);
    span {
      margin-left: 10px;
      color: var(--success-color);
    }
  }
  .custom-table-header-dark-gray {
    background: red;
    color: white;
  }
</style>
